<div layout="column" layout-align="center" ng-style="{'width': '100%'}" ng-controller="LoginController as vm">
    <div class='md-padding' layout="row" layout-align="center" flex-offset-sm="0" flex-offset-md="0" flex-offset-lg="0" flex-offset-gt-lg="0" layout-wrap>
        <md-card  class="md-whiteframe-9dp LoginBox"  layout-padding>
            <form name="LoginForm">
                <md-card-content>

                    <!--<md-toolbar md-theme="altTheme1">
                <div class="md-toolbar-tools">

                    <h2>
                        <span>Login to continue</span>
                    </h2>
                    <span flex></span>

                </div>
            </md-toolbar>-->
                    <img class="logo" src="../../images/logo.png" />
                    <h2>Login to continue</h2>
                    <!--<h4 class="md-title">Login to continue</h4>
            <md-divider ng-style="{'background': 'rgba(255, 102, 51, 0.7)'}"></md-divider>
            <br />-->


                    <md-input-container class="md-icon-float md-block md-accent inputValidation">
                        <!-- Use floating label instead of placeholder -->
                        <label>Username</label>
                        <!--<md-icon md-svg-src="img/icons/ic_person_24px.svg" class="name" ></md-icon>-->
                        <input required ng-model="vm.user" type="email" name="username" ng-pattern="/^.+@.+\..+$/" minlength="10" maxlength="100">
                        <div ng-messages="LoginForm.username.$error" role="alert">
                            <div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
                                Your username is required and must be an email address
                            </div>
                        </div>
                    </md-input-container>
                    <md-input-container class="md-icon-float md-block md-accent">
                        <!-- Use floating label instead of placeholder -->
                        <label>Password</label>
                        <!--<md-icon md-svg-src="img/icons/ic_person_24px.svg" class="password" ></md-icon>-->
                        <input ng-model="vm.password" type="password" name="password" ng-minlength="6" required>
                        <div ng-messages="LoginForm.password.$error" role="alert">
                            <div ng-message-exp="['required', 'minlength']">
                                Your password is required
                            </div>
                        </div>
                    </md-input-container>
                    <div></div>

                </md-card-content>
                <md-card-footer>
                    <label class="ErrText">{{vm.ErrorMessage}}</label>
                    <!--<div class="md-actions" layout="row" layout-align="space-around start">
            <md-button class="md-primary small-text" ng-click="vm.NewUserClick()">New User?</md-button>
                </div>-->
                    <div class="md-actions" layout="row" layout-align="space-around center">
                        <md-button class="md-primary small-text" ng-click="vm.FPClick()">Forgot Password?</md-button>
                        <span flex></span>
                        <md-button type="submit" class="md-raised md-primary" ng-click="vm.LoginClick()" ng-disabled="LoginForm.$invalid">Login</md-button>
                    </div>
                </md-card-footer>
            </form>
        </md-card>
    </div>
</div>